<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Grid 栅格 | Vue DevUI</title>
    <meta name="description" content="Vue DevUI 组件库">
    <link rel="stylesheet" href="/assets/style.b884dd64.css">
    <link rel="modulepreload" href="/assets/Home.e734a50d.js">
    <link rel="modulepreload" href="/assets/AlgoliaSearchBox.e66f60b3.js">
    <link rel="modulepreload" href="/assets/app.43ba01c1.js">
    <link rel="modulepreload" href="/assets/components_grid_index.md.646531b7.lean.js">
    <link rel="modulepreload" href="/assets/app.43ba01c1.js">
    <link rel="icon" type="image/svg+xml" href="/assets/logo.svg">
    <meta name="twitter:title" content="Grid 栅格 | Vue DevUI">
    <meta property="og:title" content="Grid 栅格 | Vue DevUI">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-4bb0db66><div class="nav-bar-inner" data-v-4bb0db66><div class="sidebar-button" data-v-4bb0db66><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" aria-label="Vue DevUI, back to home" data-v-4bb0db66 data-v-4d0f7fcc><img class="logo" src="/../../assets/logo.svg" alt="Logo" data-v-4d0f7fcc><span data-v-4d0f7fcc>Vue DevUI</span></a><!--[--><!--[--><div id="docsearch" multilang="false"></div><!--]--><!--]--><div class="flex-grow" data-v-4bb0db66></div><div class="flex items-center" data-v-4bb0db66><div class="nav" data-v-4bb0db66><nav class="nav-links" data-v-4bb0db66 data-v-5b7b1e24><!--[--><!-- <div v-for="item in theme.nav" :key="item.text" class="item"> --><!--[--><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item" href="/quick-start/" data-v-53d6b5a1>组件 <!----></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item" href="/contributing/" data-v-53d6b5a1>贡献指南 <!----></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item isExternal" href="https://devcloudfe.github.io/devui-playground" target="_blank" rel="noopener noreferrer" data-v-53d6b5a1>Playground <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-53d6b5a1><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item isExternal" href="https://github.com/DevCloudFE/vue-devui/releases/tag/v1.5.1" target="_blank" rel="noopener noreferrer" data-v-53d6b5a1>1.5.1 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-53d6b5a1><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-dropdown-link" data-v-5b7b1e24 data-v-40cec4b2><button class="button" data-v-40cec4b2><span class="button-text" data-v-40cec4b2>文档</span><span class="right button-arrow" data-v-40cec4b2></span></button><ul class="dialog" data-v-40cec4b2><!--[--><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/vue-devui/releases" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>更新日志</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/design-cn/start" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>设计规范</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-5b7b1e24><div class="nav-dropdown-link" data-v-5b7b1e24 data-v-40cec4b2><button class="button" data-v-40cec4b2><span class="button-text" data-v-40cec4b2>生态</span><span class="right button-arrow" data-v-40cec4b2></span></button><ul class="dialog" data-v-40cec4b2><!--[--><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>Ng DevUI</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/admin-page/home" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>Ng DevUI Admin</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://react-devui.surge.sh/" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>React DevUI</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/DevUIHelper" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>DevUI Helper</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/devui-playground" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>DevUI Playground</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/icon/ruleResource" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>图标库</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><!--]--><!----><!----></nav></div><div class="custom-nav flex items-center ml-l" data-v-4bb0db66><!----><!----><div class="custom-nav-item flex items-center ml-m" data-v-4bb0db66><!--[--><span class="devui-popper-trigger"><svg class="icon-theme" viewbox="0 0 1024 1024" width="16" height="16" data-v-6fec2a10><path fill="var(--devui-text)" d="M512 96C229.696 96 0 325.696 0 608c0 90.368 30.304 174.496 85.344 236.896 55.264 62.624 129.152 97.12 208.128 97.12 81.568 0 161.536-36.832 231.264-106.592l2.272-2.496c65.792-81.472 132.896-121.056 205.088-121.056 46.72 0 89.216 15.872 126.688 29.92 30.336 11.328 56.576 21.12 81.216 21.12C1024 762.912 1024 654.336 1024 608c0-282.304-229.696-512-512-512z m428 602.912c-13.088 0-35.296-8.288-58.784-17.088-40.48-15.136-90.848-33.952-149.12-33.952-92.352 0-175.328 46.944-253.76 143.456-57.184 56.704-121.056 86.688-184.832 86.688-60.352 0-117.216-26.784-160.128-75.456C88.64 751.872 64 682.784 64 608 64 360.96 264.96 160 512 160s448 200.96 448 448c0 27.328-1.952 90.912-20 90.912z m-203.296-182.848a64 64 0 1 0 128 0 64 64 0 1 0-128 0z m-343.68-202.688a64 64 0 1 0 128 0 64 64 0 1 0-128 0z m215.68 26.688a64 64 0 1 0 128 0 64 64 0 1 0-128 0z m-381.312 112a64 64 0 1 0 128 0 64 64 0 1 0-128 0zM182.4 698.752a96 96 0 1 0 192 0 96 96 0 1 0-192 0z" data-v-6fec2a10></path></svg></span><!--teleport start--><!--teleport end--><!--]--></div><a class="custom-nav-item ml-m" style="font-size:0;user-select:none;" href="https://github.com/DevCloudFE/vue-devui" target="_blank" data-v-4bb0db66><svg viewBox="0 0 20 20" width="18" height="18" data-v-4bb0db66><path fill="var(--devui-text, #252b3a)" d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0" data-v-4bb0db66></path></svg></a></div></div></div></header><aside class="sidebar" data-v-06a2164a><nav class="nav-links nav" data-v-06a2164a data-v-5b7b1e24><!--[--><!-- <div v-for="item in theme.nav" :key="item.text" class="item"> --><!--[--><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item" href="/quick-start/" data-v-53d6b5a1>组件 <!----></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item" href="/contributing/" data-v-53d6b5a1>贡献指南 <!----></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item isExternal" href="https://devcloudfe.github.io/devui-playground" target="_blank" rel="noopener noreferrer" data-v-53d6b5a1>Playground <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-53d6b5a1><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item isExternal" href="https://github.com/DevCloudFE/vue-devui/releases/tag/v1.5.1" target="_blank" rel="noopener noreferrer" data-v-53d6b5a1>1.5.1 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-53d6b5a1><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-dropdown-link" data-v-5b7b1e24 data-v-40cec4b2><button class="button" data-v-40cec4b2><span class="button-text" data-v-40cec4b2>文档</span><span class="right button-arrow" data-v-40cec4b2></span></button><ul class="dialog" data-v-40cec4b2><!--[--><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/vue-devui/releases" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>更新日志</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/design-cn/start" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>设计规范</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-5b7b1e24><div class="nav-dropdown-link" data-v-5b7b1e24 data-v-40cec4b2><button class="button" data-v-40cec4b2><span class="button-text" data-v-40cec4b2>生态</span><span class="right button-arrow" data-v-40cec4b2></span></button><ul class="dialog" data-v-40cec4b2><!--[--><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>Ng DevUI</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/admin-page/home" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>Ng DevUI Admin</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://react-devui.surge.sh/" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>React DevUI</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/DevUIHelper" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>DevUI Helper</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/devui-playground" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>DevUI Playground</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/icon/ruleResource" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>图标库</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><!--]--><!----><!----></nav><!--[--><!--]--><ul class="sidebar-links" data-v-06a2164a><!--[--><li class="sidebar-link"><a class="sidebar-link-item" href="/quick-start/"><!----><span class="sidebar-link-text">快速开始<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/on-demand/"><!----><span class="sidebar-link-text">按需引入<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/theme-guide/"><!----><span class="sidebar-link-text">主题定制<!----></span></a><!----></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">通用<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/button/"><!----><span class="sidebar-link-text">Button 按钮<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/fullscreen/"><!----><span class="sidebar-link-text">Fullscreen 全屏<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/icon/"><!----><span class="sidebar-link-text">Icon 图标<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/overlay/"><!----><span class="sidebar-link-text">Overlay 遮罩层<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/panel/"><!----><span class="sidebar-link-text">Panel 面板<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/ripple/"><!----><span class="sidebar-link-text">Ripple 水波纹<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/search/"><!----><span class="sidebar-link-text">Search 搜索框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/status/"><!----><span class="sidebar-link-text">Status 状态<!----></span></a><!----></li><!----><!----></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">导航<!----></span></p><ul class="sidebar-links"><!----><!----><!----><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/dropdown/"><!----><span class="sidebar-link-text">Dropdown 下拉菜单<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/menu/"><!----><span class="sidebar-link-text">Menu 菜单<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/pagination/"><!----><span class="sidebar-link-text">Pagination 分页<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/tabs/"><!----><span class="sidebar-link-text">Tabs 选项卡<!----></span></a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">反馈<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/alert/"><!----><span class="sidebar-link-text">Alert 警告<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/drawer/"><!----><span class="sidebar-link-text">Drawer 抽屉板<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/loading/"><!----><span class="sidebar-link-text">Loading 加载提示<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/message/"><!----><span class="sidebar-link-text">Message 全局提示<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/modal/"><!----><span class="sidebar-link-text">Modal 弹窗<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/notification/"><!----><span class="sidebar-link-text">Notification 全局通知<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/popover/"><!----><span class="sidebar-link-text">Popover 悬浮提示<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/result/"><!----><span class="sidebar-link-text">Result 结果<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/tooltip/"><!----><span class="sidebar-link-text">Tooltip 提示<!----></span></a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">数据录入<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/auto-complete/"><!----><span class="sidebar-link-text">AutoComplete 自动补全<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/checkbox/"><!----><span class="sidebar-link-text">Checkbox 复选框<!----></span></a><!----></li><!----><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/date-picker-pro/"><!----><span class="sidebar-link-text">DatePickerPro 日期选择器<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/editable-select/"><!----><span class="sidebar-link-text">EditableSelect 可输入下拉选择框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/form/"><!----><span class="sidebar-link-text">Form 表单<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/input/"><!----><span class="sidebar-link-text">Input 输入框<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/input-number/"><!----><span class="sidebar-link-text">InputNumber 数字输入框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/mention/"><!----><span class="sidebar-link-text">Mention 提及<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/radio/"><!----><span class="sidebar-link-text">Radio 单选框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/select/"><!----><span class="sidebar-link-text">Select 下拉框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/slider/"><!----><span class="sidebar-link-text">Slider 滑块<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/switch/"><!----><span class="sidebar-link-text">Switch 开关<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/textarea/"><!----><span class="sidebar-link-text">Textarea 多行文本框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/time-picker/"><!----><span class="sidebar-link-text">TimePicker 时间选择器<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/time-select/"><!----><span class="sidebar-link-text">TimeSelect 时间选择器<!----></span></a><!----></li><!----><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/upload/"><!----><span class="sidebar-link-text">Upload 上传<!----></span></a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">数据展示<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/avatar/"><!----><span class="sidebar-link-text">Avatar 头像<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/badge/"><!----><span class="sidebar-link-text">Badge 徽标<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/card/"><!----><span class="sidebar-link-text">Card 卡片<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/collapse/"><!----><span class="sidebar-link-text">Collapse 折叠面板<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/countdown/"><!----><span class="sidebar-link-text">Countdown 倒计时<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/image-preview/"><!----><span class="sidebar-link-text">ImagePreview 图片预览<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/progress/"><!----><span class="sidebar-link-text">Progress 进度条<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/rate/"><!----><span class="sidebar-link-text">Rate 评分<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/skeleton/"><!----><span class="sidebar-link-text">Skeleton 骨架屏<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/statistic/"><!----><span class="sidebar-link-text">Statistic 统计数值<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/steps/"><!----><span class="sidebar-link-text">Steps 步骤条<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/table/"><!----><span class="sidebar-link-text">Table 表格<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/tag/"><!----><span class="sidebar-link-text">Tag 标签<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/timeline/"><!----><span class="sidebar-link-text">Timeline 时间轴<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/tree/"><!----><span class="sidebar-link-text">Tree 树<!----></span></a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">布局<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item active" href="/components/grid/"><!----><span class="sidebar-link-text">Grid 栅格<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/layout/"><!----><span class="sidebar-link-text">Layout 布局<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/splitter/"><!----><span class="sidebar-link-text">Splitter 分割器<!----></span></a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><!-- TODO: make this button accessible --><div class="sidebar-mask"></div><main class="page" data-v-35e0cb6b><div class="container" data-v-35e0cb6b><!--[--><!--]--><div style="position:relative;" class="content" data-v-35e0cb6b><div><h1 id="grid-栅格" tabindex="-1">Grid 栅格 <a class="header-anchor" href="#grid-栅格" aria-hidden="true">#</a></h1><p>24 栅格系统。</p><h4 id="何时使用" tabindex="-1">何时使用 <a class="header-anchor" href="#何时使用" aria-hidden="true">#</a></h4><p>需要使用弹性布局时，并且需要适配不同的屏幕时，使用 grid 组件。</p><h3 id="基本用法" tabindex="-1">基本用法 <a class="header-anchor" href="#基本用法" aria-hidden="true">#</a></h3><p>基础栅格</p><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="devui-row devui-row__align--top devui-row__justify--start docs-devui-row"><!--[--><div class="devui-col devui-col__span--12" style=""><!--[-->col-12<!--]--></div><div class="devui-col devui-col__span--12" style=""><!--[-->col-12<!--]--></div><!--]--></div><div class="devui-row devui-row__align--top devui-row__justify--start docs-devui-row"><!--[--><div class="devui-col devui-col__span--8" style=""><!--[-->col-8<!--]--></div><div class="devui-col devui-col__span--8" style=""><!--[-->col-8<!--]--></div><div class="devui-col devui-col__span--8" style=""><!--[-->col-8<!--]--></div><!--]--></div><div class="devui-row devui-row__align--top devui-row__justify--start docs-devui-row"><!--[--><div class="devui-col devui-col__span--6" style=""><!--[-->col-6<!--]--></div><div class="devui-col devui-col__span--6" style=""><!--[-->col-6<!--]--></div><div class="devui-col devui-col__span--6" style=""><!--[-->col-6<!--]--></div><div class="devui-col devui-col__span--6" style=""><!--[-->col-6<!--]--></div><!--]--></div><div class="devui-row devui-row__align--top devui-row__justify--start docs-devui-row"><!--[--><div class="devui-col devui-col__span--4" style=""><!--[-->col-4<!--]--></div><div class="devui-col devui-col__span--4" style=""><!--[-->col-4<!--]--></div><div class="devui-col devui-col__span--4" style=""><!--[-->col-4<!--]--></div><div class="devui-col devui-col__span--4" style=""><!--[-->col-4<!--]--></div><div class="devui-col devui-col__span--4" style=""><!--[-->col-4<!--]--></div><div class="devui-col devui-col__span--4" style=""><!--[-->col-4<!--]--></div><!--]--></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div>使用 Row 和 Col 组件，可以创建一个基本的栅格系统，Col 必须放在 Row 里面。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-row</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>docs-devui-row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-12<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-12<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-row</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-row</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>docs-devui-row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-8<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-8<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-8<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-row</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-row</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>docs-devui-row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-row</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-row</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>docs-devui-row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-row</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.docs-devui-row:not(:last-of-type)</span> <span class="token punctuation">{</span>
  <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.docs-devui-row .devui-col</span> <span class="token punctuation">{</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">min-height</span><span class="token punctuation">:</span> 44px<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 44px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.docs-devui-row .devui-col:nth-of-type(2n + 1)</span> <span class="token punctuation">{</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--devui-global-bg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.docs-devui-row .devui-col:nth-of-type(2n)</span> <span class="token punctuation">{</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--devui-brand<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="对齐" tabindex="-1">对齐 <a class="header-anchor" href="#对齐" aria-hidden="true">#</a></h3><p>垂直对齐和水平对齐</p><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><p>Align top</p><div class="devui-row devui-row__align--top devui-row__justify--start docs-devui-row"><!--[--><div class="devui-col devui-col__span--6 col-child" style=""><!--[-->col-6<!--]--></div><div class="devui-col devui-col__span--6 col-child" style=""><!--[-->col-6<!--]--></div><div class="devui-col devui-col__span--6 col-child" style=""><!--[-->col-6<!--]--></div><div class="devui-col devui-col__span--6 col-child" style=""><!--[-->col-6<!--]--></div><!--]--></div><p>Align middle</p><div class="devui-row devui-row__align--middle devui-row__justify--start docs-devui-row"><!--[--><div class="devui-col devui-col__span--6 col-child" style=""><!--[-->col-6<!--]--></div><div class="devui-col devui-col__span--6 col-child" style=""><!--[-->col-6<!--]--></div><div class="devui-col devui-col__span--6 col-child" style=""><!--[-->col-6<!--]--></div><div class="devui-col devui-col__span--6 col-child" style=""><!--[-->col-6<!--]--></div><!--]--></div><p>Align bottom</p><div class="devui-row devui-row__align--bottom devui-row__justify--start docs-devui-row"><!--[--><div class="devui-col devui-col__span--6 col-child" style=""><!--[-->col-6<!--]--></div><div class="devui-col devui-col__span--6 col-child" style=""><!--[-->col-6<!--]--></div><div class="devui-col devui-col__span--6 col-child" style=""><!--[-->col-6<!--]--></div><div class="devui-col devui-col__span--6 col-child" style=""><!--[-->col-6<!--]--></div><!--]--></div><p>Justify start</p><div class="devui-row devui-row__align--top devui-row__justify--start docs-devui-row"><!--[--><div class="devui-col devui-col__span--4 col-child" style=""><!--[-->col-4<!--]--></div><div class="devui-col devui-col__span--4 col-child" style=""><!--[-->col-4<!--]--></div><div class="devui-col devui-col__span--4 col-child" style=""><!--[-->col-4<!--]--></div><div class="devui-col devui-col__span--4 col-child" style=""><!--[-->col-4<!--]--></div><!--]--></div><p>Justify center</p><div class="devui-row devui-row__align--top devui-row__justify--center docs-devui-row"><!--[--><div class="devui-col devui-col__span--4 col-child" style=""><!--[-->col-4<!--]--></div><div class="devui-col devui-col__span--4 col-child" style=""><!--[-->col-4<!--]--></div><div class="devui-col devui-col__span--4 col-child" style=""><!--[-->col-4<!--]--></div><div class="devui-col devui-col__span--4 col-child" style=""><!--[-->col-4<!--]--></div><!--]--></div><p>Justify end</p><div class="devui-row devui-row__align--top devui-row__justify--end docs-devui-row"><!--[--><div class="devui-col devui-col__span--4 col-child" style=""><!--[-->col-4<!--]--></div><div class="devui-col devui-col__span--4 col-child" style=""><!--[-->col-4<!--]--></div><div class="devui-col devui-col__span--4 col-child" style=""><!--[-->col-4<!--]--></div><div class="devui-col devui-col__span--4 col-child" style=""><!--[-->col-4<!--]--></div><!--]--></div><p>Justify between</p><div class="devui-row devui-row__align--top devui-row__justify--between docs-devui-row"><!--[--><div class="devui-col devui-col__span--4 col-child" style=""><!--[-->col-4<!--]--></div><div class="devui-col devui-col__span--4 col-child" style=""><!--[-->col-4<!--]--></div><div class="devui-col devui-col__span--4 col-child" style=""><!--[-->col-4<!--]--></div><div class="devui-col devui-col__span--4 col-child" style=""><!--[-->col-4<!--]--></div><!--]--></div><p>Justify around</p><div class="devui-row devui-row__align--top devui-row__justify--around docs-devui-row"><!--[--><div class="devui-col devui-col__span--4 col-child" style=""><!--[-->col-4<!--]--></div><div class="devui-col devui-col__span--4 col-child" style=""><!--[-->col-4<!--]--></div><div class="devui-col devui-col__span--4 col-child" style=""><!--[-->col-4<!--]--></div><div class="devui-col devui-col__span--4 col-child" style=""><!--[-->col-4<!--]--></div><!--]--></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div>使用 Row 的 align 属性和 justify 属性子元素垂直对齐和水平对齐。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Align top<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-row</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>docs-devui-row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-row</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Align middle<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-row</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>middle<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>docs-devui-row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-row</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Align bottom<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-row</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bottom<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>docs-devui-row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-row</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Justify start<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-row</span> <span class="token attr-name">justify</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>start<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>docs-devui-row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-row</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Justify center<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-row</span> <span class="token attr-name">justify</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>center<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>docs-devui-row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-row</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Justify end<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-row</span> <span class="token attr-name">justify</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>end<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>docs-devui-row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-row</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Justify between<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-row</span> <span class="token attr-name">justify</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>between<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>docs-devui-row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-row</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Justify around<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-row</span> <span class="token attr-name">justify</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>around<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>docs-devui-row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-row</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="子元素的间隔" tabindex="-1">子元素的间隔 <a class="header-anchor" href="#子元素的间隔" aria-hidden="true">#</a></h3><p>栅格之间的间隔可以用 Row 的 gutter 属性</p><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="devui-row devui-row__align--top devui-row__justify--start docs-devui-row"><!--[--><div class="devui-col devui-col__span--6 col-gutter" style="padding-left:5px;padding-right:5px;padding-top:0px;padding-bottom:0px;"><!--[--><div class="col-child">col-6</div><!--]--></div><div class="devui-col devui-col__span--6 col-gutter" style="padding-left:5px;padding-right:5px;padding-top:0px;padding-bottom:0px;"><!--[--><div class="col-child">col-6</div><!--]--></div><div class="devui-col devui-col__span--6 col-gutter" style="padding-left:5px;padding-right:5px;padding-top:0px;padding-bottom:0px;"><!--[--><div class="col-child">col-6</div><!--]--></div><div class="devui-col devui-col__span--6 col-gutter" style="padding-left:5px;padding-right:5px;padding-top:0px;padding-bottom:0px;"><!--[--><div class="col-child">col-6</div><!--]--></div><!--]--></div><div class="devui-row devui-row__align--top devui-row__justify--start docs-devui-row"><!--[--><div class="devui-col devui-col__span--6 col-gutter" style="padding-left:5px;padding-right:5px;padding-top:10px;padding-bottom:10px;"><!--[--><div class="col-child">col-6</div><!--]--></div><div class="devui-col devui-col__span--6 col-gutter" style="padding-left:5px;padding-right:5px;padding-top:10px;padding-bottom:10px;"><!--[--><div class="col-child">col-6</div><!--]--></div><div class="devui-col devui-col__span--6 col-gutter" style="padding-left:5px;padding-right:5px;padding-top:10px;padding-bottom:10px;"><!--[--><div class="col-child">col-6</div><!--]--></div><div class="devui-col devui-col__span--6 col-gutter" style="padding-left:5px;padding-right:5px;padding-top:10px;padding-bottom:10px;"><!--[--><div class="col-child">col-6</div><!--]--></div><!--]--></div><div class="devui-row devui-row__align--top devui-row__justify--start docs-devui-row"><!--[--><div class="devui-col devui-col__span--6 col-gutter" style="padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px;"><!--[--><div class="col-child">col-6</div><!--]--></div><div class="devui-col devui-col__span--6 col-gutter" style="padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px;"><!--[--><div class="col-child">col-6</div><!--]--></div><div class="devui-col devui-col__span--6 col-gutter" style="padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px;"><!--[--><div class="col-child">col-6</div><!--]--></div><div class="devui-col devui-col__span--6 col-gutter" style="padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px;"><!--[--><div class="col-child">col-6</div><!--]--></div><!--]--></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div>:gutter=&quot;10&quot; 子元素左右间隔为 5px；:gutter=&quot;[10, 20]&quot; 子元素左右间隔为 5px，上下间隔为 10px；需要适配屏幕宽度的情况，:gutter=&quot;{ xs: 10, sm: 20, md: [20, 10], lg: [30, 20], xl: [40, 30], xxl: [50, 40] }&quot;</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-row</span> <span class="token attr-name">:gutter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>docs-devui-row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-gutter<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-gutter<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-gutter<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-gutter<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-row</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-row</span> <span class="token attr-name">:gutter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[10, 20]<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>docs-devui-row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-gutter<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-gutter<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-gutter<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-gutter<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-row</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-row</span> <span class="token attr-name">:gutter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ xs: 10, sm: 20, md: [20, 10], lg: [30, 20], xl: [40, 30], xxl: [50, 40] }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>docs-devui-row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-gutter<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-gutter<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-gutter<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-gutter<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-row</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.col-gutter</span> <span class="token punctuation">{</span>
  <span class="token property">height</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> transparent <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.col-gutter:nth-of-type(2n + 1) &gt; .col-child</span> <span class="token punctuation">{</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--devui-global-bg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.col-gutter:nth-of-type(2n) &gt; .col-child</span> <span class="token punctuation">{</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--devui-brand<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="flex-填充" tabindex="-1">flex 填充 <a class="header-anchor" href="#flex-填充" aria-hidden="true">#</a></h3><p>Col 的 flex 属性支持 flex 填充。</p><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="devui-row devui-row__align--top devui-row__justify--start docs-devui-row" type="flex"><!--[--><div class="devui-col" style="flex:2 2 auto;"><!--[-->2 / 5<!--]--></div><div class="devui-col" style="flex:3 3 auto;"><!--[-->3 / 5<!--]--></div><!--]--></div><div class="devui-row devui-row__align--top devui-row__justify--start docs-devui-row" type="flex"><!--[--><div class="devui-col" style="flex:0 0 100px;"><!--[-->100px<!--]--></div><div class="devui-col" style="flex:auto;"><!--[-->auto<!--]--></div><!--]--></div><div class="devui-row devui-row__align--top devui-row__justify--start docs-devui-row" type="flex"><!--[--><div class="devui-col" style="flex:1 1 200px;"><!--[-->1 1 200px<!--]--></div><div class="devui-col" style="flex:0 1 300px;"><!--[-->0 1 300px<!--]--></div><!--]--></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><!----><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-row</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>docs-devui-row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:flex</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2 / 5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:flex</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3 / 5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-row</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-row</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>docs-devui-row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">flex</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100px<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>100px<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">flex</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>auto<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>auto<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-row</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-row</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>docs-devui-row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">flex</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1 1 200px<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1 1 200px<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">flex</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0 1 300px<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>0 1 300px<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-row</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="左右偏移" tabindex="-1">左右偏移 <a class="header-anchor" href="#左右偏移" aria-hidden="true">#</a></h3><p>使用 Col 的 offset、pull 和 push 来使子元素左右偏移。</p><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="devui-row devui-row__align--top devui-row__justify--start docs-devui-row"><!--[--><div class="devui-col devui-col__span--8" style=""><!--[-->col-8<!--]--></div><div class="devui-col devui-col__span--8 devui-col__offset--8" style=""><!--[-->col-8<!--]--></div><!--]--></div><div class="devui-row devui-row__align--top devui-row__justify--start docs-devui-row"><!--[--><div class="devui-col devui-col__span--6 devui-col__offset--6" style=""><!--[-->col-6 col-offset-6<!--]--></div><div class="devui-col devui-col__span--6 devui-col__offset--6" style=""><!--[-->col-6 col-offset-6<!--]--></div><!--]--></div><div class="devui-row devui-row__align--top devui-row__justify--start docs-devui-row"><!--[--><div class="devui-col devui-col__span--12 devui-col__offset--6 devui-col__md--span-22 devui-col__md--offset-1" style=""><!--[-->col-12 col-offset-6<!--]--></div><!--]--></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div>列偏移。使用 offset 可以将列向右侧偏。例如，offset={4} 将元素向右侧偏移了 4 个列（column）的宽度；offset、pull、push 也可以内嵌到。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-row</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>docs-devui-row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-8<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:offset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-8<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-row</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-row</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>docs-devui-row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:offset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-6 col-offset-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:offset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-6 col-offset-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-row</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-row</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>docs-devui-row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:offset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ span: 22, offset: 1 }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-12 col-offset-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-row</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="响应式布局" tabindex="-1">响应式布局 <a class="header-anchor" href="#响应式布局" aria-hidden="true">#</a></h3><p>预设六个响应尺寸：xs sm md lg xl xxl。</p><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="devui-row devui-row__align--top devui-row__justify--start docs-devui-row"><!--[--><div class="devui-col devui-col__xs--span-2 devui-col__sm--span-4 devui-col__md--span-6 devui-col__lg--span-8 devui-col__xl--span-10" style=""><!--[-->Col<!--]--></div><div class="devui-col devui-col__xs--span-20 devui-col__sm--span-16 devui-col__md--span-12 devui-col__lg--span-8 devui-col__xl--span-4" style=""><!--[-->Col<!--]--></div><div class="devui-col devui-col__xs--span-2" style=""><!--[-->Col<!--]--></div><!--]--></div><div class="devui-row devui-row__align--top devui-row__justify--start devui-row__wrap docs-devui-row"><!--[--><div class="devui-col devui-col__xs--span-0 devui-col__sm--span-4 devui-col__md--span-6 devui-col__lg--span-8 devui-col__xl--span-10" style=""><!--[-->Col<!--]--></div><div class="devui-col devui-col__xs--span-24 devui-col__sm--span-16 devui-col__md--span-12 devui-col__lg--span-8 devui-col__xl--span-4" style=""><!--[-->Col<!--]--></div><div class="devui-col devui-col__xs--span-0 devui-col__sm--span-4 devui-col__md--span-6 devui-col__lg--span-8" style=""><!--[-->Col<!--]--></div><!--]--></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div>参照 Bootstrap 的 <a href="https://getbootstrap.com/docs/3.4/css/" target="_blank" rel="noopener noreferrer">响应式设计</a>。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-row</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>docs-devui-row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:lg</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:xl</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Col<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>20<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>16<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:lg</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:xl</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Col<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Col<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-row</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-row</span> <span class="token attr-name">wrap</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>docs-devui-row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:lg</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:xl</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Col<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>24<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>16<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:lg</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:xl</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Col<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:xs</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:sm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:md</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:lg</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Col<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-row</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="栅格排序" tabindex="-1">栅格排序 <a class="header-anchor" href="#栅格排序" aria-hidden="true">#</a></h3><p>列排序。通过使用 order、 push 和 pull 类就可以改变列（column）的顺。</p><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="devui-row devui-row__align--top devui-row__justify--start docs-devui-row"><!--[--><div class="devui-col devui-col__span--18" style="order:2;"><!--[-->col-18 order-2<!--]--></div><div class="devui-col devui-col__span--6" style="order:1;"><!--[-->col-6 order-1<!--]--></div><!--]--></div><div class="devui-row devui-row__align--top devui-row__justify--start docs-devui-row"><!--[--><div class="devui-col devui-col__span--18  devui-col__push--6" style=""><!--[-->col-18 col-push-6<!--]--></div><div class="devui-col devui-col__span--6  devui-col__pull--18" style=""><!--[-->col-6 col-pull-18<!--]--></div><!--]--></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div>参照 Bootstrap 的 <a href="https://getbootstrap.com/docs/3.4/css/" target="_blank" rel="noopener noreferrer">响应式设计</a>。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-row</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>docs-devui-row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>18<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:order</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-18 order-2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:order</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-6 order-1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-row</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-row</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>docs-devui-row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>18<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:push</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-18 col-push-6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:pull</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>18<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>col-6 col-pull-18<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-row</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="row-参数" tabindex="-1">Row 参数 <a class="header-anchor" href="#row-参数" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:left;">参数名</th><th style="text-align:left;">类型</th><th style="text-align:left;">默认</th><th style="text-align:left;">说明</th><th style="text-align:left;">跳转 Demo</th></tr></thead><tbody><tr><td style="text-align:left;">align</td><td style="text-align:left;"><a href="#align">Align</a></td><td style="text-align:left;">&#39;top&#39;</td><td style="text-align:left;">flex 布局下的垂直对齐方式</td><td style="text-align:left;"><a href="#%E5%9E%82%E7%9B%B4%E5%AF%B9%E9%BD%90">垂直对齐</a></td></tr><tr><td style="text-align:left;">justify</td><td style="text-align:left;"><a href="#justify">Justify</a></td><td style="text-align:left;">&#39;start&#39;</td><td style="text-align:left;">flex 布局下的垂直对齐方式</td><td style="text-align:left;"><a href="#%E5%9E%82%E7%9B%B4%E5%AF%B9%E9%BD%90">垂直对齐</a></td></tr><tr><td style="text-align:left;">gutter</td><td style="text-align:left;"><code>number</code>|<code>array</code>|<code>object</code></td><td style="text-align:left;">0</td><td style="text-align:left;">栅格间隔，数值形式：水平间距。<br>对象形式支持响应式： { xs: 8, sm: 16, md: 24}。<br>数组形式：[水平间距, 垂直间距]。</td><td style="text-align:left;"><a href="#%E5%AD%90%E5%85%83%E7%B4%A0%E7%9A%84%E9%97%B4%E9%9A%94">子元素的间隔</a></td></tr><tr><td style="text-align:left;">wrap</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">false</td><td style="text-align:left;">是否自动换行</td><td style="text-align:left;"></td></tr></tbody></table><h3 id="col-参数" tabindex="-1">Col 参数 <a class="header-anchor" href="#col-参数" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:left;">参数名</th><th style="text-align:left;">类型</th><th style="text-align:left;">默认</th><th style="text-align:left;">说明</th><th style="text-align:left;">跳转 Demo</th></tr></thead><tbody><tr><td style="text-align:left;">span</td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;">-</td><td style="text-align:left;">栅格占位格数，为 0 时相当于 display: none</td><td style="text-align:left;"><a href="#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95">基本用法</a></td></tr><tr><td style="text-align:left;">flex</td><td style="text-align:left;"><code>string|number</code></td><td style="text-align:left;">-</td><td style="text-align:left;">flex 布局填充</td><td style="text-align:left;"><a href="#flex%E5%A1%AB%E5%85%85">flex 填充</a></td></tr><tr><td style="text-align:left;">offset</td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;">-</td><td style="text-align:left;">栅格左侧的间隔格数，间隔内不可以有栅格</td><td style="text-align:left;"><a href="#%E5%B7%A6%E5%8F%B3%E5%81%8F%E7%A7%BB">左右偏移</a></td></tr><tr><td style="text-align:left;">pull</td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;">-</td><td style="text-align:left;">栅格向左移动格数</td><td style="text-align:left;"><a href="#%E5%B7%A6%E5%8F%B3%E5%81%8F%E7%A7%BB">左右偏移</a>、<a href="#%E6%A0%85%E6%A0%BC%E6%8E%92%E5%BA%8F">栅格排序</a></td></tr><tr><td style="text-align:left;">push</td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;">-</td><td style="text-align:left;">栅格向右移动格数</td><td style="text-align:left;"><a href="#%E5%B7%A6%E5%8F%B3%E5%81%8F%E7%A7%BB">左右偏移</a>、<a href="#%E6%A0%85%E6%A0%BC%E6%8E%92%E5%BA%8F">栅格排序</a></td></tr><tr><td style="text-align:left;">order</td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;">-</td><td style="text-align:left;">栅格顺序，flex 布局模式下有效</td><td style="text-align:left;"><a href="#%E6%A0%85%E6%A0%BC%E6%8E%92%E5%BA%8F">栅格排序</a></td></tr><tr><td style="text-align:left;">xs</td><td style="text-align:left;"><code>number|object</code></td><td style="text-align:left;">-</td><td style="text-align:left;">&lt;576px 响应式栅格，可为栅格数或一个包含其他属性的对象</td><td style="text-align:left;"><a href="#%E6%A0%85%E6%A0%BC%E6%8E%92%E5%BA%8F">栅格排序</a></td></tr><tr><td style="text-align:left;">sm</td><td style="text-align:left;"><code>number|object</code></td><td style="text-align:left;">-</td><td style="text-align:left;">&gt;=576px 响应式栅格，可为栅格数或一个包含其他属性的对象</td><td style="text-align:left;"><a href="#%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80">响应式布局</a></td></tr><tr><td style="text-align:left;">md</td><td style="text-align:left;"><code>number|object</code></td><td style="text-align:left;">-</td><td style="text-align:left;">&gt;=768px 响应式栅格，可为栅格数或一个包含其他属性的对象</td><td style="text-align:left;"><a href="#%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80">响应式布局</a></td></tr><tr><td style="text-align:left;">lg</td><td style="text-align:left;"><code>number|object</code></td><td style="text-align:left;">-</td><td style="text-align:left;">&gt;=992px 响应式栅格，可为栅格数或一个包含其他属性的对象</td><td style="text-align:left;"><a href="#%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80">响应式布局</a></td></tr><tr><td style="text-align:left;">xl</td><td style="text-align:left;"><code>number|object</code></td><td style="text-align:left;">-</td><td style="text-align:left;">&gt;=1200px 响应式栅格，可为栅格数或一个包含其他属性的对象</td><td style="text-align:left;"><a href="#%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80">响应式布局</a></td></tr><tr><td style="text-align:left;">xxl</td><td style="text-align:left;"><code>number|object</code></td><td style="text-align:left;">-</td><td style="text-align:left;">&gt;=1600px 响应式栅格，可为栅格数或一个包含其他属性的对象</td><td style="text-align:left;"><a href="#%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80">响应式布局</a></td></tr></tbody></table><h3 id="grid-类型定义" tabindex="-1">Grid 类型定义 <a class="header-anchor" href="#grid-类型定义" aria-hidden="true">#</a></h3><h4 id="align" tabindex="-1">Align <a class="header-anchor" href="#align" aria-hidden="true">#</a></h4><div class="language-ts"><pre><code><span class="token keyword">type</span> <span class="token class-name">Align</span> <span class="token operator">=</span> <span class="token string">&#39;top&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;middle&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;bottom&#39;</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="justify" tabindex="-1">Justify <a class="header-anchor" href="#justify" aria-hidden="true">#</a></h4><div class="language-ts"><pre><code><span class="token keyword">type</span> <span class="token class-name">Justify</span> <span class="token operator">=</span> <span class="token string">&#39;start&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;end&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;center&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;around&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;between&#39;</span><span class="token punctuation">;</span>
</code></pre></div></div></div><div data-v-35e0cb6b><div class="page-contributor-label" data-v-35e0cb6b>Contributors</div><div class="page-contributor" data-v-35e0cb6b data-v-36223ac2><!--[--><a href="https://github.com/ming-bin" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/54826175?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><a href="https://github.com/liyao1520" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/76561071?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><a href="https://github.com/Lonely-shang" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/34124930?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><!--]--></div></div><footer class="page-footer" data-v-35e0cb6b data-v-63a8fcc6><div class="edit" data-v-63a8fcc6><div class="edit-link" data-v-63a8fcc6 data-v-084d37fe><!----></div></div><div class="updated" data-v-63a8fcc6><!----></div></footer><div class="next-and-prev-link" data-v-35e0cb6b data-v-1443c067><div class="container" data-v-1443c067><div class="prev" data-v-1443c067><a class="link" href="/components/tree/" data-v-1443c067><svg t="1637469990202" class="icon icon icon-prev" viewbox="0 0 1056 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5081" width="16" height="16" data-v-1443c067><path d="M277.92 512.064c0 8.128 3.072 16.224 9.28 22.4l362.336 362.336a31.808 31.808 0 0 0 45.12-0.128 31.904 31.904 0 0 0 0.128-45.12L355.2 512 694.72 172.448a31.808 31.808 0 0 0-0.128-45.12 31.904 31.904 0 0 0-45.12-0.128L287.232 489.536a31.616 31.616 0 0 0-9.312 22.4l0.032 0.128z" fill="var(--devui-brand, #5e7ce0)" p-id="5082"></path></svg><span class="text" data-v-1443c067>Tree 树</span></a></div><div class="next" data-v-1443c067><a class="link" href="/components/layout/" data-v-1443c067><span class="text" data-v-1443c067>Layout 布局</span><svg t="1637469947735" class="icon icon icon-next" viewbox="0 0 1056 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4917" width="16" height="16" data-v-1443c067><path d="M746.08 512.064a31.584 31.584 0 0 1-9.28 22.4L374.464 896.8a31.808 31.808 0 0 1-45.12-0.128 31.904 31.904 0 0 1-0.128-45.12L668.8 512 329.28 172.448a31.808 31.808 0 0 1 0.128-45.12 31.904 31.904 0 0 1 45.12-0.128l362.304 362.336c6.208 6.176 9.28 14.272 9.312 22.4l-0.032 0.128z" fill="var(--devui-brand, #5e7ce0)" p-id="4918"></path></svg></a></div></div></div><!--[--><!--]--><!----><aside class="toc-warpper" data-v-35e0cb6b data-v-38776bfe><nav class="devui-content-nav" data-v-38776bfe><h3 class="devui-fast-forward" data-v-38776bfe>快速前往</h3><ul class="devui-step-nav" data-v-38776bfe><!--[--><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#基本用法" title="基本用法" data-v-38776bfe>基本用法</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#对齐" title="对齐" data-v-38776bfe>对齐</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#子元素的间隔" title="子元素的间隔" data-v-38776bfe>子元素的间隔</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#flex-填充" title="flex 填充" data-v-38776bfe>flex 填充</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#左右偏移" title="左右偏移" data-v-38776bfe>左右偏移</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#响应式布局" title="响应式布局" data-v-38776bfe>响应式布局</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#栅格排序" title="栅格排序" data-v-38776bfe>栅格排序</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#row-参数" title="Row 参数" data-v-38776bfe>Row 参数</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#col-参数" title="Col 参数" data-v-38776bfe>Col 参数</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#grid-类型定义" title="Grid 类型定义" data-v-38776bfe>Grid 类型定义</a></li><!--]--></ul><div class="devui-marker" data-v-38776bfe></div></nav></aside></div></main></div><!----><!----><!----><!--]--></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"components_accordion_index.md\":\"a92e3443\",\"components_alert_index.md\":\"c7702e03\",\"components_anchor_index.md\":\"f7333cbb\",\"components_auto-complete_index.md\":\"4de98e8d\",\"components_avatar_index.md\":\"69aa04d5\",\"components_back-top_index.md\":\"d1ab787c\",\"components_badge_index.md\":\"e4750848\",\"components_breadcrumb_index.md\":\"c976c02b\",\"components_button_index.md\":\"5ad2976d\",\"components_card_index.md\":\"07ffbefa\",\"components_carousel_index.md\":\"f88f0b13\",\"components_cascader_index.md\":\"ee34cce7\",\"components_checkbox_index.md\":\"3ec7d7a1\",\"components_collapse_index.md\":\"9f2cbd98\",\"components_color-picker_index.md\":\"76658b37\",\"components_comment_index.md\":\"7f6ae658\",\"components_countdown_index.md\":\"556b68b1\",\"components_date-picker-pro_index.md\":\"a354c050\",\"components_date-picker_index.md\":\"00801143\",\"components_dragdrop_index.md\":\"27ca48b1\",\"components_drawer_index.md\":\"f1f95db0\",\"components_dropdown_index.md\":\"2e85d37e\",\"components_editable-select_index.md\":\"dfceeabe\",\"components_form_index.md\":\"aa7415f4\",\"components_fullscreen_index.md\":\"91a2fd77\",\"components_gantt_index.md\":\"c7536435\",\"components_grid_index.md\":\"646531b7\",\"components_icon_index.md\":\"b13a05fb\",\"components_image-preview_index.md\":\"6064aa0f\",\"components_input-icon_index.md\":\"03605b44\",\"components_input-number_index.md\":\"75cb181b\",\"components_input_index.md\":\"399db2a5\",\"components_layout_index.md\":\"bd89a2a7\",\"components_list_index.md\":\"398a7889\",\"components_loading_index.md\":\"86c25c88\",\"components_mention_index.md\":\"4e5fcead\",\"components_menu_index.md\":\"5e7b2a2a\",\"components_message_index.md\":\"288b49b1\",\"components_modal_index.md\":\"6d985802\",\"components_multi-auto-complete_index.md\":\"d7dd7812\",\"components_nav-sprite_index.md\":\"59326b1c\",\"components_notification_index.md\":\"17d66bf4\",\"components_overlay_index.md\":\"b3c2d8b1\",\"components_overview_index.md\":\"4f4893a2\",\"components_pagination_index.md\":\"fa43e1ee\",\"components_panel_index.md\":\"78140495\",\"components_popover_index.md\":\"e061fad6\",\"components_progress_index.md\":\"f99bb298\",\"components_quadrant-diagram_index.md\":\"5b863b4f\",\"components_radio_index.md\":\"1569e619\",\"components_rate_index.md\":\"8ed5b018\",\"components_read-tip_index.md\":\"65f3a3e8\",\"components_result_index.md\":\"5a0e2c71\",\"components_ripple_index.md\":\"e22eb85c\",\"components_search_index.md\":\"a6ca9673\",\"components_select_index.md\":\"14f5b72d\",\"components_skeleton_index.md\":\"87cfbcd2\",\"components_slider_index.md\":\"c3e69a49\",\"components_splitter_index.md\":\"7b49b977\",\"components_statistic_index.md\":\"699289db\",\"components_status_index.md\":\"9b3ee9c1\",\"components_steps-guide_index.md\":\"4d707f63\",\"components_steps_index.md\":\"75686d75\",\"components_sticky_index.md\":\"839717a7\",\"components_switch_index.md\":\"05eb9888\",\"components_table_index.md\":\"1b34dab5\",\"components_tabs_index.md\":\"2612fccc\",\"components_tag-input_index.md\":\"d6c90326\",\"components_tag_index.md\":\"9d46f105\",\"components_textarea_index.md\":\"f6a86e66\",\"components_time-picker_index.md\":\"f8cff83c\",\"components_time-select_index.md\":\"38dfaf50\",\"components_timeline_index.md\":\"9b7ebcb4\",\"components_tooltip_index.md\":\"f9f4b384\",\"components_transfer_index.md\":\"7005ca26\",\"components_tree-select_index.md\":\"d122e78e\",\"components_tree_index.md\":\"2611f2c7\",\"components_upload_index.md\":\"65171bcd\",\"components_virtual-list_index.md\":\"6c90a3dd\",\"contributing_development-specification_api-demo-design_index.md\":\"fc9f2d3e\",\"contributing_development-specification_coding-specification_index.md\":\"af51d196\",\"contributing_development-specification_component-document_index.md\":\"a849b30c\",\"contributing_development-specification_directory-organization_index.md\":\"58197a6f\",\"contributing_development-specification_index.md\":\"1df9cfa5\",\"contributing_index.md\":\"7660b0ff\",\"en-us_components_alert_index.md\":\"96d493c1\",\"en-us_components_auto-complete_api-en.md\":\"004a35e9\",\"en-us_components_avatar_index.md\":\"dbe38f1a\",\"en-us_components_badge_index.md\":\"e48f2672\",\"en-us_components_button_index.md\":\"ec772540\",\"en-us_components_carousel_index.md\":\"3fec7a3f\",\"en-us_components_color-picker_index.md\":\"9fe5a01c\",\"en-us_components_comment_index.md\":\"2a0696ba\",\"en-us_components_editable-select_index.md\":\"73d1175f\",\"en-us_components_form_index.md\":\"65caae2d\",\"en-us_components_input_index.md\":\"136ae80e\",\"en-us_components_menu_index.md\":\"0bb24150\",\"en-us_components_message_index.md\":\"3fa5c7c8\",\"en-us_components_modal_index.md\":\"736ef31f\",\"en-us_components_panel_index.md\":\"4a1db166\",\"en-us_components_popover_index.md\":\"6b07f22f\",\"en-us_components_progress_index.md\":\"b364f914\",\"en-us_components_radio_index.md\":\"bddcefa7\",\"en-us_components_rate_index.md\":\"3940452b\",\"en-us_components_read-tip_index.md\":\"56a74b67\",\"en-us_components_result_index.md\":\"369abc51\",\"en-us_components_ripple_index.md\":\"b6d519cb\",\"en-us_components_search_index.md\":\"8745e3f6\",\"en-us_components_skeleton_index.md\":\"73d6ba05\",\"en-us_components_slider_index.md\":\"d6b0ecd3\",\"en-us_components_splitter_index.md\":\"ae397e5b\",\"en-us_components_statistic_index.md\":\"6f27cda4\",\"en-us_components_status_index.md\":\"e80d4793\",\"en-us_components_tag_index.md\":\"2388e235\",\"en-us_components_tooltip_index.md\":\"6013670f\",\"en-us_index.md\":\"45997edd\",\"en-us_quick-start_index.md\":\"5cb0ca76\",\"index.md\":\"d8afff32\",\"on-demand_index.md\":\"cc889f91\",\"quick-start_index.md\":\"2f52f012\",\"theme-guide_index.md\":\"4b58afef\"}")</script>
    <script type="module" async src="/assets/app.43ba01c1.js"></script>
    
  </body>
</html>